<template>
  <a-card class="ax__template h-[100%]" :body-style="{ height: '100%' }">
    <template v-if="currentStep.type === 'base'">
      <Base />
    </template>
    <template v-else-if="currentStep.type === 'code'">
      <CodeVue />
    </template>
    <template v-else>
      <Field />
    </template>
  </a-card>
</template>

<script setup lang="ts">
import { codeTable } from '../../data/table';
import { currentStep, resetStep } from './data/config';
import { getTableInfo } from './data/curd';
import { resetCodeFormData } from './data/data';
import Base from './dynamic-components/Base.vue';
import CodeVue from './dynamic-components/Code.vue';
import Field from './dynamic-components/Field.vue';

provide('code', () => {
  return codeTable.value.keys[0];
});

onMounted(() => {
  let code: any = codeTable.value.keys[0];
  getTableInfo(code);
});

onUnmounted(() => {
  resetStep();
  resetCodeFormData();
});
</script>

<style lang="scss" scoped></style>
